<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas{
            border:1px solid;
        }
    </style>
</head>
<body>
    <!-- <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F2105211120031355-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642564291&t=2d3e4504effd8f9dd67108b20ec402df" /> -->
   <canvas width="500" height="500"></canvas>
   <script>
        // 资源的加载；
        // let src = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F2105211120031355-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642564291&t=2d3e4504effd8f9dd67108b20ec402df";
       
    //    获取上下文 ；
    let canvas = document.querySelector("canvas");
    let ctx = canvas.getContext("2d");
    // let arr = ["https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F2105211120031355-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642564291&t=2d3e4504effd8f9dd67108b20ec402df","https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp05%2F1Z92R1392462X-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642564861&t=dbbde73d1f4029dea5e42513886b6b8e"] ;
       
        // 如何判断资源加载完成；
        // let img = new Image();
        // img.src = src;
        // img.onload = function(){
        //     console.log("图片加载完毕");
        //     ctx.drawImage(img,0,0);
        // }

        // 预加载 ：等待所有的图片加载完成之后才能操作图片；
        // loadImg(arr,function(loadedImg){
        //     console.log(loadedImg);
        //     ctx.drawImage(loadedImg[1],0,0);
        // });
        // function loadImg(arr,cb){
        //     let count = 0;
        //     let loadedImg = [];
        //     arr.forEach(item=>{
        //         let img = new Image();
        //         img.src = item;
        //         img.onload = function(){
        //             // console.log(11);
        //             loadedImg.push(img);
        //             count++;
        //             if(count==arr.length){
        //                 console.log("全部加载完毕");
        //                 cb(loadedImg);
        //             }
        //         }
        //     })
        // }




       
    // var array1 = [12 , "foo" , {name: "Joe"} , -2458];
	// var array2 = ["Doe" , 555 , 100];
	// Array.prototype.push.apply(array1, array2);
    // console.log(array1);
    // contat



    // 通过对象来定位异步加载；


    let obj = {
        img1:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F2105211120031355-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642564291&t=2d3e4504effd8f9dd67108b20ec402df",
        img2:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp05%2F1Z92R1392462X-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642564861&t=dbbde73d1f4029dea5e42513886b6b8e"};
        
        loadImg(obj,function(obj){
            console.log(obj);
            ctx.drawImage(obj.img2,0,0);
        })

        function loadImg(obj,cb){

            // 统计对象里图片的数量
            let length = 0;
            for(let key in obj){
                length++;
            }

            let num = 0;
            let loadedImg = {};

            for(let key in obj){
                let img = new Image();
                img.src = obj[key];
                img.onload = function(){
                    num++;
                    loadedImg[key] = this;
                    if(num==length){
                        cb && cb(loadedImg);
                    }
                }
            }
        }



    // 2个ajax  同时发送 ，要求在2个ajax 都获取到数据以后 打印2个ajax的返还的数据；

    </script>
</body>
</html>